<template>
  <view class="contenter">
    <change-times :type="1" @confirm="confirm"></change-times>
    <view class="head">
      <view class="u-flex headMian" >
        <view class="headTime" @click="tabChangeIndex(index)" :class="{'active':index == tabIndex}" v-for="(data,index) in time">{{data}}</view>
      </view>
    </view>
    <scroll-view scroll-y style="height: 970rpx;width: 100%;" @scrolltolower="onreachBottom">
      <view class="item u-flex flex_bt" v-for="(data,index) in list" :key="index">
        <view>
          <view class="name">项目名称：{{data.sname}}</view>
          <view class="hao">订单号：{{data.orderid}}</view>
          <view class="time">核销时间：{{data.end_time}}</view>
        </view>
        <view>
          <view class="price">￥{{data.price}}</view>
          <view v-if="data.type == 1">销售提成</view>
          <view v-else>手工费</view>
        </view>
      </view>
      <view class="loading_text">
        <text>{{loadingText || '暂无数据'}}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import ChangeTimes from "../../components/item/changeTimes";
export default {
  name: "index",
  components: {ChangeTimes},
  data(){
    return{
      time:['全部','销售提成','手工费'],
      search:'',
      tabIndex:0,
      month:'',
      loadingText:'',
      list:[],
      allpage:'',
      page:1,
      type:""//1-销售提成 2-手工费 不填为显示全部
    }
  },
  onLoad(option){
    this.setData()
  },
  methods:{
    //获取技师门店信息
    setData(){
      let form = {
        page:this.page || 1,
        limit:10	,
        month:this.month	,
        type:this.type,
      }
      let that = this
      this.$api.priceHistory(form).then(res => {
        this.allpage = res.data.num
        that.list = [...that.list,...res.data.list]
      })
    },
    tabChangeIndex(index){
      this.tabIndex = index
      if(index === 0 ) this.type = ''
      if(index !== 0 ) this.type = index
      this.list = []
      this.page = 1
      this.setData()
    },
    confirm(e){
      this.month = e
      this.list = []
      this.page = 1
      this.setData()
    },
    //搜索
    searchChange(){},
    //上拉加载
    onReachBottom(){
      if(this.page>=this.allpage){
        this.loadingText="已经到底啦！"
        return ;
      }else{
        this.loadingText = '加载中....'
      }
      this.page ++
      this.setData()
    },
  }
}
</script>

<style scoped lang="scss">
.contenter{
  margin:0 32rpx;
  .head{
    .headMian{
      padding-top: 28rpx;
      padding-bottom: 38rpx;
      .headTime{
        width: 218rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        border-radius: 8rpx;
        background: white;
        margin-right: 16rpx;
        color: $uni-text-color-inverse;
        font-size: 28rpx;
        border: 2rpx solid $uni-border-color;
        &:last-child{
          margin: 0;
        }
      }
      .active{
        background: $uni-color-primary;
        border: 2rpx solid $uni-color-primary;
        color: white;
      }
    }
  }

  .item{
    background: white;
    padding: 24rpx 14rpx;
    margin-bottom: 20rpx;
    height: 200rpx;
    border-radius: 12rpx;
    font-size: 24rpx;
    color: #4B4B4B;
    .name{
      font-size: 32rpx;
      font-weight: bold;
      color: #4B4B4B;
      margin-bottom: 20rpx;
    }
    .hao{
      margin-bottom: 20rpx;
    }
    .price{
      color: $uni-color-price;
      font-size: 42rpx;
      margin-bottom: 8rpx;

    }
  }
}
</style>